{% extends "title_base.html"  %}
{% block title  %}
{% load staticfiles %}
<link type="image/x-icon" rel="shortcut icon" href="{% static "favicon.ico" %}">
<link type="text/css" rel="stylesheet" href="{% static "css/common.css" %}">
<link type="text/css" rel="stylesheet" href="{% static "css/index.css" %}">


<body class="index">
	<div class="header">
		<a href="/" class="logo" title="首页"><img alt="我的音乐" src="{% static "image/logo.png" %}"></a>
		<div class="search-box">
	    <form id="searchForm" action="{% url 'search' 1 %}" method="post" target="_blank">
        {% csrf_token %}
	        <div class="search-keyword">
	            <input name="kword" type="text" class="keyword" maxlength="120" placeholder="音乐节" />
	        </div>
	        <input id="subSerch" type="submit" class="search-button" value="搜 索" />
	    </form>
	    <div id="suggest" class="search-suggest"></div>
  		<div class="search-hot-words">
			{% for song in search_song  %}
				<a target="play" href="{% url 'play' song.song.song_id %}" >{{ song.song.song_name }}</a>
			{% endfor  %}
  		</div>
  	</div>
	</div>
	<div class="nav-box">
    <div class="nav-box-inner">
        <ul class="nav clearfix">
            <li><a href="/">首页</a></li>
            <li><a href="{% url 'ranking' %}" target="_blank">歌曲排行</a></li>
            <li><a href="{% url 'home' 1 %}" target="_blank">用户中心</a></li>
        </ul>
        <div class="category-nav">
            <div class="category-nav-header">
                <strong><a href="javascript:;" title="">音乐分类</a></strong>
            </div>
            <div class="category-nav-body">
                <div id="J_CategoryItems" class="category-items">
                {% for label in label_list  %}
                    <div class="item" data-index="1"><h3>
                        <a href="javascript:;">{{ label.label_name }}</a></h3>
                    </div>
                {% endfor  %}
                </div>
            </div>
        </div>
    </div>

    {#轮播图 {% url 'play' 12 %}是播放页面的连接地址#}
	<div class="wrapper clearfix">
		<div class="main">
			<div id="J_FocusSlider" class="focus">
				<div id="bannerLeftBtn" class="banner_btn"></div>
				<ul class="focus-list f_w">
                    <li class="f_s"><a target="play" href="{% url 'play' 12 %}" class="layz_load" >
                        <img data-src="{% static '/image/datu-1.jpg' %}"  width="750" height="275"></a>
                    </li>
					<li class="f_s"><a target="play" href="{% url 'play' 13 %}" class="layz_load" >
                        <img data-src="{% static '/image/datu-2.jpg' %}"  width="750" height="275"></a>
                    </li>
				</ul>
				<div id="bannerRightBtn" class="banner_btn"></div>
			</div>
		</div>
		<div class="aside">
			<h2>热门歌曲</h2>
			<ul>
				{% for song in play_hot_song  %}
					<li><span>{{ forloop.counter }}</span>
                        <a target="play" href="{% url 'play' song.song.song_id %}" >{{ song.song.song_name }}</a>
                    </li>
				{% endfor  %}
			</ul>
		</div>
	</div>
	<div class="today clearfix">
		<div class="today-header">
            <i></i>
			<h2>新歌推荐</h2>
		</div>
		<div class="today-list-box slide">
			<div id="J_TodayRec" class="today-list">
				<ul>
                {% for list in daily_recommendation  %}
                    {% if forloop.first  %}
                        <li class="first">
                    {% else  %}
                        <li>
                    {% endif  %}
                    <a class="pic layz_load pic_po" target="play" href="{% url 'play' list.song_id %}" >
                        <img data-src="{% static "songImg/" %}{{ list.song_img }}"  ></a>
                    <div class="name">
                        <h3><a target="play" href="{% url 'play' list.song_id %}" >{{ list.song_name }}</a></h3>
                        <div class="singer"><span>{{ list.song_singer }}</span></div>
                        <div class="times">发行时间：<span>{{ list.song_release }}</span></div>
                    </div>
                    <a target="play" href="{% url 'play' list.song_id %}" class="today-buy-button" >去听听></a>
                {% endfor  %}
				</ul>
			</div>
		</div>
	</div><!--end today-->
	<div class="section">
		<ul id="J_Tab" class="tab-trigger">
	  	<li data-cur="0" class="current t_c">热门搜索</li>
        <li data-cur="1" class="t_c">热门下载</li>
		</ul>
		<div class="tab-container">
	    <div id="J_Tab_Con" class="tab-container-cell">
            {% for list in all_ranking  %}
                {% if forloop.first %}
                    <ul class="product-list clearfix t_s current">
                {% else  %}
                    <ul class="product-list clearfix t_s" style="display:none;">
                {% endif  %}
                    {% for songs in list  %}
                    <li>
                        <a target="play" href="{% url 'play' songs.song.song_id %}" class="pic layz_load pic_po" >
                            <img data-src="{% static "songImg/" %}{{ songs.song.song_img }}" ></a>
                        <h3><a target="play" href="{% url 'play' songs.song.song_id %}" >{{ songs.song.song_name }}</a></h3>
                        <div class="singer"><span>{{ songs.song.song_singer }}</span></div>
                        {% if all_ranking|first  == list %}
                        <div class="times">搜索次数：<span>{{ songs.dynamic_search }}</span></div>
                        {% else %}
                        <div class="times">下载次数：<span>{{ songs.dynamic_down }}</span></div>
                        {% endif %}
                    </li>
                    {% endfor %}
                    </ul>
            {% endfor %}
        </div>
        </div>
    </div><!--end section-->
	</div>
	<script data-main="{% static "js/index.js" %}" src="{% static "js/require.js" %}"></script>
{% endblock  %}
